<template>
	<div id="title-left">
		<!-- 左侧一级标题 -->
		<div v-for="(item1,index) in magnetData" :key="index" class="magnet-first">
			<div class="group-left" :style="{background:groupStyle.groupLabelColor}">
				<div class="title-content" :style="{color:groupStyle.groupLableFontColor}">{{item1.groupName}}</div>
			</div>
			<!-- 小三角 -->
			<div class="triangle" :style="{borderLeftColor:groupStyle.groupLabelColor}"></div>
			<!-- 右侧二级标题 -->
			<div class="magnet-two">
				<MagnetItem :magnet="item1.portlets" :mType="mType" :magnetStyle="magnetStyle" :magnetShortStyle="magnetShortStyle"></MagnetItem>
			</div>
		</div>
	</div>
</template>

<script>
	import MagnetItem from './magnet-item.vue'
	export default {
		name: 'TitleLeft',
		components: {
			MagnetItem
		},
		props: {
			mType: {
				// default: () => '1'
			},
			magnetStyle: {
				// default: function() {
				// 	return {}
				// }
			},
			magnetData: {
				// type: Array,
				// default: function() {
				// 	return []
				// }
			},
			groupStyle: {
				// default: function() {
				// 	return {}
				// }
			},
			magnetShortStyle: {

			}
		}
	}
</script>

<style scoped lang="scss">
	#title-left {
		width: 100%;
		height: 100%;

		.magnet-first {
			position: relative;
			width: 100%;
			margin-left: 15px;
			padding: 12px 0;
			border-bottom: 1px solid #ccc;

			.group-left {
				position: absolute;
				float: left;
				left: 0;
				top: 20px;
				bottom: 20px;
				font-size: 14px;
				text-align: center;
				width: 86px;
				background-color: #49A4EA;
				color: #fff;
				overflow: hidden;

				.title-content {
					position: absolute;
					top: 50%;
					left: 50%;
					max-width: 70px;
					margin-top: -8px;
					margin-left: -28px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			.triangle {
				position: absolute;
				width: 0;
				height: 0;
				line-height: 0;
				font-size: 0;
				border: 6px solid transparent;
				border-left-color: #49A4EA;
				left: 86px;
				top: 50%;
				margin-top: -5px;
			}

			.magnet-two {
				margin-left: 100px;
				margin-top: 15px;
			}
		}

		/*设置容器的滚动条样式*/
		&::-webkit-scrollbar {
			/*滚动条整体部分，其中的属性有width,height,background,border等（就和一个块级元素一样）（位置1）*/
			width: 4px;
			height: 4px;
		}

		&::-webkit-scrollbar-button {
			/*滚动条两端的按钮（位置2）*/
			display: none;
		}

		&::-webkit-scrollbar-track-piece {
			/*内层轨道，滚动条中间部分（位置4）*/
			width: 8px;
			background-color: #f5f5f5;
			border-radius: 6px;
		}

		&::-webkit-scrollbar-thumb {
			/*滚动条里面可以拖动的那部分（位置5）*/
			height: 50px;
			background: #bec7d5;
			border-radius: 6px;
		}
	}

	.clearfix:after,
	.clearfix:before {
		content: "";
		display: table;
	}

	.clearfix:after {
		clear: both;
	}

	.clearfix {
		*zoom: 1;
	}
</style>
